<template>
 <common-card title="今日销售额" :value="numberFormat(salesToday)">
   <template #default>
       <div class="compare">
       <div><span class="emphasis">日同比 &nbsp;{{ numberFormat(salesGrowthLastDay)}}%</span><span class="decrement"></span></div>
       <div><span class="emphasis">月同比 &nbsp;{{ numberFormat(salesGrowthLastMonth)}}%</span><span class="increment"></span></div>
      </div>
   </template>
   <template #footer>
    <div>昨日销售额 <span class="emphasis">{{ moneyFormat(salesLastDay) }}</span></div>
   </template>

 </common-card>
</template>

<script lang="ts">

export default {
  name: "TodaySales",
 
};
</script>

<script lang="ts" setup>
import CommonCard from './CommonCard.vue'
import { ref, computed } from 'vue'
import { useReportDataStore} from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'

const { numberFormat, moneyFormat } = useFormat()

const reportDataStore = useReportDataStore()
//今日销售额
const salesToday = computed(()=>reportDataStore.reportData.salesToday)
//日同比
const salesGrowthLastDay = computed(()=>reportDataStore.reportData.salesGrowthLastDay)
//月同比
const salesGrowthLastMonth = computed(()=>reportDataStore.reportData.salesGrowthLastMonth)
//昨日销售额
const salesLastDay = computed(()=>reportDataStore.reportData.salesLastDay)
</script>


<style lang="scss" scoped>
.compare {
  div {
    height: 24px;
  }
}
</style>